<template>
  <div class="goods">
    <span class="title"
      ><strong>{{ good.title }}</strong></span
    >
    <img v-img-lazy="good.img" />
    <span class="description"> {{ good.description }}</span>
    <div class="tags">
      {{ good.tags }}
    </div>
    <span class="price">
      ￥{{ good.price }}
      <el-button
        type="warning"
        round
        size="large"
        style="margin-left: 60px"
        @click="choosesku"
        >加入购物车</el-button
      >
    </span>
    <div class="sku" v-if="getsku" @click="getsku = false">
      <template v-for="item in good.skus">
        <div @click="addcart(item)" v-if="item.onsale == 1" :key="item">
          {{ item.title }}
        </div>
      </template>
    </div>
  </div>

</template>

<script setup lang="ts">

import { tr } from "element-plus/es/locale";
import { watch } from "vue";
import { ref } from "vue";
import { h } from "vue";

interface OrderItem {
  spu: Object;
  count: number;
}

const prop = defineProps({
  good: {
    type: Object,
    default: () => {},
  },
});

const getsku = ref(false);

const deepEqual = (obj1: any, good: any, skuId: number): boolean => {
  return (
    JSON.stringify(obj1.spu) === JSON.stringify(good) &&
    JSON.stringify(obj1.sku.id) === JSON.stringify(skuId)
  );
};

const choosesku = () => {
  getsku.value = true;
};

const addcart = (sku) => {
  let a = JSON.parse(localStorage.getItem("orderItem"));
  if (a != null) {
    //已经存入过商品
    let index = a.findIndex((e) => deepEqual(e, prop.good, sku.id));
    if (index == -1) {
      //第一次存入这个商品
      a.push({
        spu: prop.good,
        count: 1,
        sku: {
          id: sku.id,
          title: sku.title,
          price: sku.price,
        },
      });
    } else {
      //第n次存入这个商品
      a[index].count++;
    }
    localStorage.setItem("orderItem", JSON.stringify(a));
  } else {
    //未存入过商品
    let arr = [
      {
        spu: prop.good,
        count: 1,
        sku: {
          id: sku.id,
          title: sku.title,
          price: sku.price,
        },
      },
    ];
    localStorage.setItem("orderItem", JSON.stringify(arr));
  }
  getsku.value = false;

  ElNotification({
    title: "通知",
    message: h("i", { style: "color: teal" }, "购物车添加成功"),
  });
};

watch(prop.good,()=>{
  console.log(prop.good)
        prop.good.description.length > 35
        ? (prop.good.description = prop.good.description.substring(0, 35) + "...")
        : prop.good.description;
},{deep:true,immediate:true})
</script>

<style scoped lang="scss">
.goods {
  width: 310px;
  height: 490px;
  margin: 20px;
  background-color: rgb(167, 230, 255);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  color: rgb(255, 255, 255);
  padding: 5px;
  border-radius: 10px;
  position: relative;

  .title {
    font-size:25px ;
  }
  .tags {
    background-color: rgb(60, 255, 245);
    border-radius: 5px;
    align-self: flex-start;
  }
  .price {
    color: red;
    align-self: flex-start;
    font-size: 30px;
    font-weight: 800;
  }
  .description {
    flex-grow: 1;
  }

  .sku {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;


      div {
        padding: 5px;
        cursor: pointer;
        background-color: rgb(0, 184, 61);
        margin: 5px;
        border: {
          style: dashed;
          color: rgb(51, 54, 54);
        }
      }

  }
}
.goods:hover {
  background-color: rgb(78, 140, 255);
  color: rgb(0, 0, 0);
  cursor: pointer;
  box-shadow: 0 0 10px rgb(51, 54, 54);
  transform: scale(1.05);
  transition: all 0.3s ease;
}
.goods img {
  height: 300px;
  border-radius: 5px;
}
</style>